<template>
    <div>
      <div>
        <el-form ref="form" :model="group" label-width="80px">
          <el-form-item label="商品名">
            <el-input v-model="group.goodName"></el-input>
          </el-form-item>
          <el-form-item label="图片">
            <template>
            <el-image :src="group.imageUrl" style="width: 80px;height: 60px"></el-image>
            </template>
          </el-form-item>
          <el-form-item label="状态">
            <template>
              <span v-if="this.group.status === 0">
                启用中
              </span>
              <span v-else>
                活动已过期
              </span>
            </template>
          </el-form-item>
          <el-form-item label="简介">
            <el-input v-model="group.groupContent"></el-input>
          </el-form-item>
          <el-form-item label="可拼人数">
            <el-input v-model="group.voliadNumber"></el-input>
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker v-model="group.endTime" type="datetime">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button @click="checkMore()">查看拼团详情</el-button>
          </el-form-item>
        </el-form>
      </div>
<!--      详情-->
      <div>
        <el-dialog title="参团" :visible.sync="dialogTableVisibleMore">
          <el-button @click="joinGroup">参与拼团</el-button>
          <el-button @click="share">分享</el-button>
          <el-table
            :data="groupRecordList"
            style="width: 100%">
            <el-table-column
              label="用户名"
              width="180">
              <template slot-scope="scope">
                <span v-if="scope.row.isCommander==0">
                  {{scope.row.name}}（团长）
                </span>
                <span v-else>
                  {{scope.row.name}}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              label="状态"
              width="180">
              <template slot-scope="scope">
                <span v-if="scope.row.status==0">
                  参与中
                </span>
                <span v-else>
                  参与成功
                </span>
              </template>
            </el-table-column>
          </el-table>
        </el-dialog>
      </div>
<!--      商品sku-->
      <div>
        <el-dialog title="选择规格购买" :visible.sync="dialogTableVisible">
          <el-table :data="groupGoodSkuList">
            <el-table-column property="skuName" label="规格" width="150"></el-table-column>
            <el-table-column
              label="图片"
              width="180">
              <template slot-scope="scope">
                <el-image :src="scope.row.imageUrl" style="width: 80px;height: 60px"></el-image>
              </template>
            </el-table-column>
            <el-table-column property="price" label="价格" width="200"></el-table-column>
            <el-table-column property="voliadNumber" label="剩余数量"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button @click="buyThis(scope.row)">确认</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-dialog>
      </div>
<!--      支付-->
      <div>
        <el-dialog title="支付" :visible.sync="dialogTableVisiblePay">
          <el-button @click="payMoney">确认支付</el-button>
        </el-dialog>
        <div ref="home" v-html="payResult"></div>
      </div>
    </div>
</template>
<script>
import { findGroupGoodByUrl, shareUrl, findGoodSkuList, joinGroup, toPay, findGroupRecordList, findIsJoinGroup } from '@/api/consumer/consumer'
export default {
  name: 'Index',
  data() {
    return {
      // 调用成功的表单
      payResult: '',
      // 详情
      dialogTableVisibleMore: false,
      // 弹窗
      dialogTableVisible: false,
      // 支付
      dialogTableVisiblePay: false,
      // 可拼团商品
      groupGoodList: [],
      // 可拼团商品sku
      groupGoodSkuList: [],
      // 订单
      order: {
        subject: ''
      },
      // 用户
      user: {
        id: ''
      },
      groupId: '',
      // 拼团记录
      groupRecordList: [],
      // 链接
      urlVo: {
        url: ''
      },
      // 商品信息
      group: {
        id: ''
      }
    }
  },
  created() {
    this.init()
  },
  destroyed() {
    this.websocket.close() // 离开路由之后断开websocket连接
  },
  methods: {
    // 获取链接中数据信息
    init() {
      var url = window.location.href
      this.urlVo.url = url
      console.log(url)
      console.log(this.group)
      if (this.group.id === null || this.group.id === '') {
        findGroupGoodByUrl(this.urlVo).then(res => {
          if (res.data != null) {
            this.groupId = res.data.id
            this.group = res.data
          }
        })
      }
    },
    // 分享
    share() {
      var url = window.location.href + '/' + this.groupId
      this.urlVo.url = url
      shareUrl(this.urlVo).then(res => {
        this.urlVo.url = res.data
      })
    },
    // 查看详情
    checkMore() {
      this.dialogTableVisibleMore = true
      findGroupRecordList(this.groupId).then(res => {
        this.groupRecordList = res.data
      })
    },
    // 参与拼团
    joinGroup() {
      this.dialogTableVisible = true
      findGoodSkuList(this.groupId).then(res => {
        this.groupGoodSkuList = res.data
      })
    },
    // 购买
    buyThis(val) {
      findIsJoinGroup(this.groupId).then(res => {
        if (res.data === 2) {
          this.$message.error('已参加过此活动')
        } else if (res.data === 3) {
          var url = window.location.href + '/' + this.groupId
          this.$router.push({
            path: '/login',
            query: {
              url: url,
              flag: 5
            }
          })
        } else {
          this.dialogTableVisiblePay = true
          joinGroup(val).then(res => {
            this.order = res.data
            this.order.subject = '小宝贝吉桑'
            this.dialogTableVisible = false
          })
        }
      })
    },
    // 支付
    payMoney() {
      toPay(this.order).then(res => {
        this.payResult = res.data
        console.log(this.payResult)
        this.$nextTick(() => {
          this.$refs.home.children[0].submit()
        })
      })
    }
  },
  mounted() {
    this.group = this.$route.query.group
    this.groupId = this.group.id
    console.log(this.group)
  }
}
</script>
<style scoped>
</style>
